import React, { useMemo } from 'react'
import style from './Index.module.less'
import { Skeleton } from 'antd'
import ReactEchartsCore from 'echarts-for-react/lib/core'
import * as echarts from 'echarts/core'
import { PieChart } from 'echarts/charts'
import { TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { strToNum } from '@src/assets/js/tool'
echarts.use([PieChart, TooltipComponent, CanvasRenderer])
const colors = ['#409feb', '#f17a70']
function getOptions (l) {
  const data = l.map((li, i) => {
    return {
      name: li.name,
      value: parseInt(li.c),
      itemStyle: {
        color: colors[i]
      }
    }
  })
  return {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 4
        },
        labelLine: {
          show: false
        },
        data
      }
    ]
  }
}

function Main ({ data, ready = true }) {
  const list = useMemo(() => {
    const r = []
    if (data && data.foreign_case) {
      const d = data.foreign_case
      r.push({ name: '普通案件数', c: parseInt(d.normal_count) })
      r.push({ name: '涉外案件数', c: parseInt(d.foreign_count) })
    }
    return r
  }, [data])
  const option = useMemo(() => {
    return getOptions(list)
  }, [list])
  const l = useMemo(() => {
    const a = list
    let total = 0
    let pr = 100
    a.forEach(li => { total += strToNum(li.c) })
    a.forEach((li, i) => {
      if (i === a.length - 1) {
        const p = Math.round(pr * 100) / 100
        li.percent = `${p}%`
      } else {
        const p = Math.round(strToNum(li.c) / total * 10000) / 100
        li.percent = `${p}%`
        pr -= p
      }
    })
    return a
  }, [list])
  return (
    <div className={style.container}>
      <div className={style.header}>涉外案件数占比图</div>
      <div className={style.body}>
        <div className={style.chart}>
          {ready ? (
            <ReactEchartsCore style={{ width: '100%', height: '100%' }} echarts={echarts} option={option} />
          ) : (
            <div className={style['loading-box']}>
              <Skeleton active />
            </div>
          )}
        </div>
        <div className={style.info}>
          {
            l.map((li, i) => {
              return (
                <div className={style.item} key={i}>
                  <div className={style.left}>
                    <span className={style.dot} style={{ backgroundColor: colors[i] }} />
                    <span>{li.name}</span>
                  </div>
                  <div className={style.right}>
                    <span className={style.num}>{li.c}</span>
                    <span className={style.split} />
                    <span className={style.percent}>{li.percent}</span>
                  </div>
                </div>
              )
            })
          }
        </div>
      </div>
    </div>
  )
}

export default Main
